<template>
  <base-container :show-title="false">
    <a-result status="success" title="提交成功">
      <template #subTitle>
        <span v-if="approveSuccess">您的查价单已审批通过，更多信息请联系相关人员...</span>
        <span v-else>查价单正在审核的路上，更多信息请联系相关人员...</span>
      </template>
      <template #extra>
        <a-button type="primary" @click="back">返回列表</a-button>
      </template>
      <div class="content">
        <a-descriptions title="套餐信息" class="mb-5" v-if="CiBao || CBYXB">
          <a-descriptions-item label="套餐">{{ purchaseData.CibaoPriceData?.comboName }}</a-descriptions-item>
          <a-descriptions-item label="推广时长">
            {{ purchaseData.CibaoPriceData?.comboPriceName }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="套餐信息" class="mb-5" v-if="HJBW">
          <a-descriptions-item label="推广时长">
            {{ purchaseData.HjbwPriceData?.comboPriceName }}
          </a-descriptions-item>
        </a-descriptions>
        <template v-else>
          <!-- <a-descriptions title="百搜优化" class="mb-5">
            <a-descriptions-item label="平台">
              {{ purchaseData.BwPriceData?.columnName }}
            </a-descriptions-item>
            <a-descriptions-item label="投放时长">
              {{ purchaseData.BwPriceData?.comboPriceName }}
            </a-descriptions-item>
            <a-descriptions-item label="投放时间段">
              {{ purchaseData.BwPriceData?.quote }}
            </a-descriptions-item>
            <a-descriptions-item
              label="创意配图"
              v-if="purchaseData.BwPriceData?.hasCreativePicture === CreativePictureEnum.yes"
            >
              已购买
            </a-descriptions-item>
            <a-descriptions-item label="版本优惠">
              {{ BwVersionTypeKeyMap[purchaseData.BwPriceData?.versionType || VersionTypeEnum.Cheap] }}
            </a-descriptions-item>
          </a-descriptions> -->
          <a-descriptions title="360标王" class="mb-5" v-if="purchaseData.Bw360PriceData">
            <a-descriptions-item label="平台">
              {{ purchaseData.Bw360PriceData?.columnName }}
            </a-descriptions-item>
            <a-descriptions-item label="投放时长">
              {{ purchaseData.Bw360PriceData?.comboPriceName }}
            </a-descriptions-item>
            <a-descriptions-item label="投放时间段">
              {{ purchaseData.BwPriceData?.quote }}
            </a-descriptions-item>
          </a-descriptions>
        </template>
        <h3 class="step-title">审核流程</h3>
        <a-steps :current="step">
          <template #progressDot="{ prefixCls }">
            <span :class="`${prefixCls}-icon-dot`" />
          </template>
          <a-step title="新建查价" description="您的查价单被创建" />
          <a-step title="运营审批" description="您的查价单已审批通过" v-if="approveSuccess" />
          <a-step title="运营审批" description="运营在审批您的查价单" v-else />
          <a-step title="提单" />
          <a-step title="上线" />
        </a-steps>
      </div>
    </a-result>
    <Divider />
    <div class="table">
      <!-- <SelectedTable
        :scroll="{ y: 'auto' }"
        :show-operate="false"
        :category="type"
        show-heat-rate
        :selected-table-data="purchaseData.selectedData"
        :msiusidppoi="0"
      /> -->
    </div>
  </base-container>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import SelectedTable from '@/views/price-sheet/components/SelectedTable.vue'
import { usePriceSheetStore } from '@/store/usePriceSheetStore'
import BaseContainer from '@/components/base-container/index.vue'
import Divider from '@/components/divider/index.vue'
import { useCategory } from '@/hooks/useCategotry'
import { BwVersionTypeKeyMap } from '@/views/price-sheet/interface'
import { CreativePictureEnum, VersionTypeEnum } from '@/core/enums/type'
import { ApproveStatusEnum } from '@/core/enums/status'

const router = useRouter()
const priceSheetStore = usePriceSheetStore()
const { purchaseData } = storeToRefs(priceSheetStore)
const type = computed(() => {
  return purchaseData.value.type
})
const { CiBao, CBYXB, HJBW } = useCategory(type)

const approveSuccess = computed(() => {
  return purchaseData.value.approveStatus === ApproveStatusEnum.SUCCESS
})

const step = computed(() => {
  return approveSuccess.value ? 2 : 1
})

function back() {
  router.push({
    name: 'price-manager'
  })
}

onMounted(() => {
  setTimeout(() => {
    // @ts-ignore-next-line
    const viewport = document.querySelector('.os-viewport')
    if (viewport) {
      viewport.scrollTop = 0
    }
  }, 200)
})
</script>

<style lang="scss" scoped>
.table {
  margin: 0 32px;
}

.step-title {
  color: rgb(0 0 0 / 85%);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5715;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 20px;
}
</style>
